<template>
	<view class="page">
		<!-- 地图全屏 -->
		<map v-if="mapReady" class="map" :latitude="center.latitude" :longitude="center.longitude" :scale="17"
			show-location />

		<!-- 三个圆按钮 -->
		<view class="fab-bar">
			<!-- 左：上次步数 -->
			<wd-button type="default" :custom-style="smallOutlineStyle" @click="showLastSteps">
				<view class="two-lines">
					<text>上次</text>
					<text>步数</text>
				</view>
			</wd-button>

			<!-- 中：开始跑步（淡主绿大圆） -->
			<wd-button type="default" :custom-style="bigSoftGreenStyle" @click="onStart">
				<view class="big-content">
					<image class="runner-img" src="@/static/run/paobu.png" mode="aspectFit" />
					<text class="big-text">开始跑步</text>
				</view>
			</wd-button>

			<!-- 右：跑步记录（改成与左边一致） -->
			<wd-button type="default" :custom-style="smallOutlineStyle" @click="toRecords">
				<view class="two-lines">
					<text>跑步</text>
					<text>记录</text>
				</view>
			</wd-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		runState
	} from '@/stores/run'
	import {
		fetchTodaySteps
	} from '@/utils/werun'

	/* 地图中心 */
	const center = ref({
		latitude: 20.0433,
		longitude: 110.1999
	})
	const mapReady = ref(false)
	onMounted(() => {
		uni.getLocation({
			type: 'gcj02',
			success: res => {
				center.value = {
					latitude: res.latitude,
					longitude: res.longitude
				}
				mapReady.value = true
			},
			fail: () => {
				mapReady.value = true
				uni.showToast({
					title: '定位失败，使用默认位置',
					icon: 'none'
				})
			}
		})
	})

	/* 动作 */
	function showLastSteps() {
		uni.navigateTo({
			url: '/pages/lastTime/index'
		})
	}

	function toRecords() {
		uni.navigateTo({
			url: '/pages/history/index'
		})
	}
	async function onStart() {
		try {
			const today = await fetchTodaySteps()
			runState.startSteps = today
			runState.startTime = Date.now()
			runState.paused = false
			uni.navigateTo({
				url: '/pages/courses/selectCourse'
			})
		} catch (e) {
			uni.showModal({
				title: '提示',
				content: e?.message || '获取微信运动失败'
			})
		}
	}

	/* —— 圆形按钮样式 —— */

	/* 中间大圆（260rpx，淡主绿） */
	const bigSoftGreenStyle =
		'width:260rpx;height:260rpx;border-radius:50% !important;' +
		'background:#6DDFA4;color:#fff;' +
		'box-shadow:0 12rpx 28rpx rgba(30,185,105,.25);' +
		'display:flex;align-items:center;justify-content:center;' +
		'padding:0 !important;min-width:0 !important;border:none;overflow:hidden;'

	/* 左右小圆（160rpx，灰底绿字 + 描边） */
	const smallOutlineStyle =
		'width:160rpx;height:160rpx;border-radius:50% !important;' +
		'background:#F2F2F2;border:2rpx solid #6DDFA4;color:#16794F;' +
		'box-shadow:0 6rpx 16rpx rgba(0,0,0,.05);' +
		'display:flex;align-items:center;justify-content:center;' +
		'padding:0 !important;min-width:0 !important;overflow:hidden;'
</script>

<style scoped>
	.page {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.map {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* 三个圆容器 */
	.fab-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 116rpx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
	}

	/* 按钮内部文字布局 */
	.two-lines {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: inherit;
		line-height: 1.4;
		/* 🔑 增加行间距 */
	}

	.big-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.runner-img {
		width: 100rpx;
		/* 根据实际效果可调整大小 */
		height: 100rpx;
		margin-bottom: 6rpx;
		/* 给文字留点间距 */
	}

	.big-text {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 1rpx;
	}
</style>